<template>
  <div>
    <Card>
      <Row>
        <div class="but">
          <Button icon="md-add" @click="AddMenu">新增</Button>
          <div style="margin-left: 10px"></div>
          <!--  -->
          <Button @click="deleteMone" type="error" icon="md-trash">删除</Button>
        </div>
      </Row>
      <Row>
        <Col flex="auto">
          <div v-if="this.ruleList.length == 0" class="Menucss">
            &nbsp; 暂无数据 &nbsp;
          </div>
          <div v-else>
            <Menu
              v-if="ruleMenu"
              style="width: 220px"
              @on-select="MenuItclck"
              class="Menucss"
            >
              <MenuItem
                class="MenuIspan"
                @on-dblclick="dblclicktew"
                v-for="item in ruleList"
                :key="item"
                :name="item.id"
              >
                <span class="fonttype">{{ item.title }}</span>
              </MenuItem>
            </Menu>
          </div>
        </Col>
        <div class="editForm">
          <Form
            ref="formRule"
            :label-width="100"
            :model="formRule"
            :rules="ruleRule"
            inline
          >
          </Form>
          <div slot="label" class="check">展示对象:</div>
          <div style="margin-left: 16px; margin-top: 3px">
            <RadioGroup v-model="formRule.rulesType">
              <Radio label="所有" :value="4"></Radio>
              <span style="margin-left: 5px"></span>
              <Radio label="平台" :value="3"></Radio>
              <span style="margin-left: 5px"></span>
              <Radio label="货主" :value="2"></Radio>
              <span style="margin-left: 5px"></span>
              <Radio label="驾驶员" :value="1"></Radio>
            </RadioGroup>
          </div>
          <div slot="label" class="check" style="margin-top: 17px">
            条款标题:
          </div>
          <div class="boindex">
            <Input v-model="formRule.title" style="width: 330px"></Input>
          </div>
          <div style="margin-top: 0px">
            <div slot="label" class="check" style="margin-top: 18px">
              条款内容:
            </div>
            <div class="form-quill editorbox">
              <editor
                id="edit"
                v-if="editRul"
                v-model="formRule.rulesContent"
              ></editor>
            </div>
          </div>
          <div class="edibu">
            <div></div>
            <div>
              <Button
                style="margin-left: 15px"
                type="primary"
                @click="ACtegory"
                :disabled="modify"
                >修改</Button
              >
            </div>
          </div>
        </div>
      </Row>
      <!-- 新增 -->
      <Modal v-model="Addeimod" title="新增规则" width="1020" height="600">
        <Form
          ref="formAdd"
          :label-width="100"
          :model="formAdd"
          :rules="ruleAdd"
          inline
        >
          <FormItem label="展示对象:" prop="rulesType">
            <RadioGroup v-model="formAdd.rulesType">
              <Radio label="所有" :value="4"></Radio>
              <span style="margin-left: 5px"></span>
              <Radio label="平台" :value="3"></Radio>
              <span style="margin-left: 5px"></span>
              <Radio label="货主" :value="2"></Radio>
              <span style="margin-left: 5px"></span>
              <Radio label="驾驶员" :value="1"></Radio>
            </RadioGroup>
          </FormItem>
          <FormItem> </FormItem>
          <FormItem> </FormItem>
          <FormItem label=" 条款标题:" prop="title">
            <Input v-model="formAdd.title" style="width: 330px"></Input>
          </FormItem>
          <FormItem label="条款内容:" prop="rulesContent" class="form-quill">
            <editor
              v-if="rulesCo"
              id="add"
              v-model="formAdd.rulesContent"
            ></editor>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="Addeimod = false">取消</Button>
          <Button type="primary" @click="AddConrules">确定</Button>
        </div>
      </Modal>
      <!-- 弹框规则列表 -->
      <div>
        <Modal
          class="RuleLis"
          v-model="Ruleimod"
          :title="Ruletitle"
          width="50%"
          height="500"
        >
          <iframe
            v-if="Ruleiiframe"
            ref="myFrame"
            style="border: 0"
            :src="this.htmls"
            height="540"
            width="100%"
            name="demo"
            scrolling="auto"
            sandbox="allow-same-origin"
          ></iframe>
          <div slot="footer">
            <Button @click="Ruleimod = false">取消</Button>
            <Button type="primary" @click="Ruleimod = false">确定</Button>
          </div>
        </Modal>
      </div>
    </Card>
  </div>
</template>

<script>
import {
  getPlatformRulesList,
  getPlatformRulesId,
  deletePlatformRules,
  savePlatformRules,
} from "@/api/index";
import { getStore, setStore } from "@/libs/storage";
import editor from "@/views/my-components/freight/editor";
import axios from "axios";
export default {
  data() {
    return {
      Ruleiiframe: true,
      editRul: true,
      rulesCo: false,
      Addeimod: false,
      indexcss: null,
      Ruledit: false,
      ruleMenu: true,
      formRule: {
        title: "",
        rulesContent: "",
        rulesType: "", //1驾驶员 2货主
      },
      formAdd: {
        title: "",
        rulesContent: "",
        rulesType: "", //1驾驶员 2货主
      },
      ruleRule: {
        title: [
          {
            required: true,
            message: "请填写标题",
            trigger: "blur",
          },
        ],
        rulesType: [
          {
            required: true,
            message: "请选择展示对象",
            trigger: "change",
          },
        ],
        rulesContent: [
          {
            required: true,
            message: "请填规则内容",
            trigger: "blur",
          },
        ],
      },
      ruleAdd: {
        rulesType: [
          {
            required: true,
            message: "请选择展示对象",
            trigger: "change",
          },
        ],
        rulesContent: [
          {
            required: true,
            message: "请填规则内容",
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "请填写标题",
            trigger: "blur",
          },
        ],
      },
      modify: true,
      Ruledis: true,
      Ruletitle: "",
      Ruleimod: false,
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      ruleList: [],
      header: {
        "content-type": "multipart/form-data",
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      htmls: "",
      ruleId: "",
      arrOne: [],
    };
  },
  components: {
    editor,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getDataList();
    },
    //点击新增
    AddMenu() {
      this.formAdd.rulesContent = "";
      this.formAdd = {};
      this.rulesCo = false;
      this.$nextTick(() => {
        this.rulesCo = true;
      });
      this.Addeimod = true;
    },
    // 新增确定
    AddConrules() {
      this.$refs.formAdd.validate((valid) => {
        if (valid) {
          if (this.formAdd.rulesType == "所有") {
            this.formAdd.rulesType = 4;
          } else if (this.formAdd.rulesType == "平台") {
            this.formAdd.rulesType = 3;
          } else if (this.formAdd.rulesType == "货主") {
            this.formAdd.rulesType = 2;
          } else if (this.formAdd.rulesType == "驾驶员") {
            this.formAdd.rulesType = 1;
          }
          let content = this.formAdd;
          savePlatformRules(content).then((res) => {
            if (res.code == 200) {
              this.getDataList();
              this.Addeimod = false;
              this.formAdd = {};
              this.rulesCo = false;
              this.$Message.success("操作成功");
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    // 获取数据
    getDataList() {
      this.ruleMenu = false;
      this.$nextTick(() => {
        this.ruleMenu = true;
      });
      this.arrOne = [];
      // this.searchForm.userId = this.userId;
      getPlatformRulesList(this.searchForm).then((res) => {
        if (res.code == 200) {
          if (res.result.length > 0) {
            this.ruleList = res.result;
            this.ruleList.reverse();

          } else {
            this.ruleList = [];
          }
        } else {
        }
      });
    },
    dblclicktew(val) {},
    //点击查看
    MenuItclck(val, num) {
      if (num == 2) {
        this.arrOne = [];
      }
      this.editRul = false;
      this.$nextTick(() => {
        this.editRul = true;
      });
      this.ruleId = val;
      this.arrOne.push({
        val: val,
      });
      if (this.arrOne.length == 2) {
        if (this.arrOne[0].val == this.arrOne[1].val) {
          this.arrOne = [];
          this.Ruleimod = true;
        } else {
          this.arrOne = [];
          this.arrOne.push({
            val: val,
          });
        }
      }
      this.ruleList.forEach((item) => {
        if (item.id == val) {
          this.formRule.id = item.id;
          this.formRule.title = item.title;
          // this.formRule.rulesContent = item.content;
          if (item.rulesType == 4) {
            this.formRule.rulesType = "所有";
          } else if (item.rulesType == 3) {
            this.formRule.rulesType = "平台";
          } else if (item.rulesType == 2) {
            this.formRule.rulesType = "货主";
          } else if (item.rulesType == 1) {
            this.formRule.rulesType = "驾驶员";
          }
          this.Ruletitle = "《" + item.title + "》";
        }
      });
      this.Ruleiiframe = false;
      this.$nextTick(() => {
        this.Ruleiiframe = true;
      });
      getPlatformRulesId({ id: val }).then((res) => {
        // 
        if (this.$baseUrl=="http://47.92.248.46:8089") { 
           this.htmls =`http://47.92.248.46:8089` + res.result.rulesPath;
        }else{
           this.htmls = "http://47.92.248.46:8089" + res.result.rulesPath;
        }
       
        this.formRule.rulesContent = res.result.content;
        this.modify = false;
      });
    },
    // 修改
    ACtegory() {
      if (this.formRule.title == "") {
        this.$Message.warning("请填写条款标题");
        return false;
      } else if (this.formRule.rulesContent == "") {
        this.$Message.warning("请填写条款内容");
        return false;
      } else if (this.formRule.rulesType == "") {
        this.$Message.warning("请选择展示对象");
        return false;
      }
      if (this.formRule.rulesType == "所有") {
        this.formRule.rulesType = 4;
      } else if (this.formRule.rulesType == "平台") {
        this.formRule.rulesType = 3;
      } else if (this.formRule.rulesType == "货主") {
        this.formRule.rulesType = 2;
      } else if (this.formRule.rulesType == "驾驶员") {
        this.formRule.rulesType = 1;
      }
      this.$refs.formRule.validate((valid) => {
        if (valid) {
          this.bus.$emit("loading", true);
          // this.editRul = false;//清空富文本
          let content = this.formRule;
          savePlatformRules(content).then((res) => {
            if (res.code == 200) {
              if (this.formRule.rulesType == 4) {
                this.formRule.rulesType = "所有";
              } else if (this.formRule.rulesType == 3) {
                this.formRule.rulesType = "平台";
              } else if (this.formRule.rulesType == 2) {
                this.formRule.rulesType = "货主";
              } else if (this.formRule.rulesType == 1) {
                this.formRule.rulesType = "驾驶员";
              }
              this.getDataList();
              this.$nextTick(() => {
                this.MenuItclck(this.formRule.id, 2);
              });
              // this.formRule = {};
              // this.editRul = true;
              this.bus.$emit("loading", false);
              // this.formRule.rulesContent = "";
              this.$Message.success("操作成功");
            } else {
              this.bus.$emit("loading", false);
              // this.editRul = true;
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    // 删除
    deleteMone() {
      if (this.ruleId != "") {
        this.$Modal.confirm({
          title: "确认删除",
          // 记得确认修改此处
          content: "您确认将 " + this.formRule.title + " 删除?",
          onOk: () => {
            // 删除\
            deletePlatformRules({
              id: this.ruleId,
            }).then((res) => {
              this.editRul = false;
              this.$nextTick(() => {
                this.editRul = true;
              });
              this.$Message.success("操作成功");
              this.getDataList();
              this.formRule = {};
              this.formRule.rulesContent = "";
            });
          },
        });
      } else {
        this.$Message.warning("请选中需要删除的数据");
      }
    },
  },
};
</script>

<style lang="less" >
.ivu-btn-text {
  border: 1px solid #eee;
}
.RuleLis {
  .ivu-modal-header-inner {
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    font-weight: 700;
  }
  .ivu-modal-content {
    .ivu-modal-header {
      border: 0;
    }
  }
  .ivu-modal-footer {
    border: 0;
  }
  .ivu-modal-body {
    padding: 0 30px;
  }
}
.but {
  display: flex;
}
.Ruleibut {
  display: flex;
  // justify-content: space-between;
  margin-bottom: 10px;
}
.rule {
  display: flex;
  margin-top: 30px;
  width: 100%;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  span {
    color: #39394d;
    text-decoration: none;
    display: inline-block;
    line-height: 38px;
    font-size: 14px;
  }
}
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.Ruleist {
  margin-top: 30px;
  font-size: 20px;
  color: #39394d;
}
.boindex {
  margin-top: 6px;
  margin-left: 16px;
}
.editorbox {
  width: 50px;
  margin-top: 5px;
  margin-left: 16px;
}
.hover {
  color: #ffa500;
}
.editForm {
  margin-left: 2.4rem;
  margin-top: 3rem;
  height: 44rem;
}
.edibu {
  margin-left: 214%;
  margin-top: 15px;
}
.but {
  display: flex;
  margin-left: 15px;
}
.Menucss {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3rem;
  height: 44rem;
}
.MenuIspan {
  width: 93%;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fonttype {
  font-size: 15px;
  font-weight: 500;
}
.check {
  margin-left: 17px;
  // margin-top: 20px;
  &::before {
    content: "*";
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
  }
}
</style>